<template>
  <div>
    <img
      @click="$router.push('/actStation')"
      class="btnimg"
      src="@/assets/images/home/actbtn.png"
      alt
    />
    <img
      @click="$router.push('/equity')"
      class="btnimg1"
      src="@/assets/images/turntable/gohome.png"
      alt
    />
    <div class="backgroung_img">
      <p class="act_time">活动时间：2020.3.1-4.5</p>
      <img
        src="@/assets/images/turntable/turntable.png"
        alt
        class="turntable_base"
        :style="'transform:rotateZ('+rotateDeg+'deg);transition-duration:3s'"
      />
      <img src="@/assets/images/turntable/point.png" alt class="point" @click="begin" />
      <img src="@/assets/images/turntable/base.png" alt class="base" />
      <img src="@/assets/images/turntable/rule.png" alt class="rule_img" />
      <p class="times">还剩{{timesNum}}次机会</p>
      <div class="rule_content">
        <div class="rule_text">
          <p class="rule_title">一、活动时间</p>
          <p>抽奖资格获取时间：即日起至2020年3月31日</p>
          <p>抽奖时间：即日起至2020年4月5日</p>
          <p class="rule_title">二、活动对象</p>
          <p>邮储银行活动网点借记卡持卡人</p>
          <p class="rule_title">三、活动内容</p>
          <p>活动期间，在微信、支付宝、京东绑定活动网点开户的借记卡并默认选择该卡片进行消费，可于T+2日后关注“邮储银行厦门分行”微信公众号，点击悦享优惠—客户俱乐部—消费抽积分进入活动页面参与抽奖，最高可获得100积分，积分可兑换满减权益，在权益商城购买各类产品/服务并使用邮储银行卡支付时抵扣。奖品额度有限，用完即止。</p>
          <p class="rule_title">四、抽奖资格</p>
          <p>1.活动期间，在微信、支付宝、京东绑定活动网点开户的借记卡并默认选择该卡片进行消费，每笔消费（且满10元及以上）可获得1次抽奖机会，每个客户每天最高享3次。</p>
          <p>2.活动期间，活动网点星级客户可获取对应抽奖机会：</p>
          <p>一星客户：额外获赠1次抽奖机会；</p>
          <p>二星客户：额外获赠2次抽奖机会；</p>
          <p>三星客户：额外获赠3次抽奖机会。</p>
          <p class="rule_title">五、活动细则</p>
          <p>1．本活动仅限邮储银行活动网点借记卡持卡人参加（活动网点详见列表）。</p>
          <p>2．邮储银行活动网点借记卡持卡人使用该卡片消费后，于T+2日获得抽奖资格。</p>
          <p>3．每笔消费（且满10元及以上）可获得1次抽奖机会，每个客户每天最高享3次。</p>
          <p>4．同一手机号、同一微信号、同一银行卡号、同一手机设备视为同一用户。</p>
          <p>5．积分有限期截至2020年7月31日，未兑换的积分将在2020年8月1日清零。</p>
          <p>
            6．满减权益数量有限，先到先得，满减权益需于2020年7月31日前使用，逾期未使用即失效。
            <span
              style="color:#fff;font-weight:bold"
            >部分产品/服务有使用有效期，下单前请认真查看产品/服务使用规则及产品/服务有效期。</span>
          </p>
          <p>7．商品/服务退货时，积分均不作退还。</p>
          <p>8．凡参与本活动，即视为同意活动规则所述各项规定。</p>
          <p>9．在法律允许的范围内，我行将保留修改本次活动条款、延迟或提前终止本活动的权利。</p>
          <p>10．本活动中有关商品或服务由银商旅行580提供，持卡人应当自行决定是否使用商品或服务。邮储银行不对平台所提供的商品或服务的质量提供保证，在法律法规允许的范围内，邮储银行不就有关商品或服务引起的有关事宜或损害承担责任。对此，持卡人应自行直接接洽处理解决。银商旅行580客服电话：0592-5215580。</p>
          <p>11．本活动由“银联商务厦门分公司”提供平台支持，操作中如果有任何问题，请联系客服热线：0592-5215580 。</p>
          <p>12.活动期间，持卡人可至邮储银行活动网点进行咨询。活动网点如下：</p>
          <img :style="{'margin-top':'30px'}" src="@/assets/images/turntable/biaoge.jpg" alt />
        </div>
      </div>
      <!-- 中奖弹窗 -->
      <div class="succe" v-if="winPrize">
        <img @click="winPrize=false" class="turnof" src="@/assets/images/turntable/turnoff.png" alt />
        <img class="toast_img" src="@/assets/images/turntable/redparket.png" alt />
        <p class="succe_tittle">恭喜您</p>
        <p class="succe_coin">{{coin}}积分</p>
        <p class="succe_bottom">所获积分可在“积分明细”里查看</p>
        <img
          class="succe_btn"
          src="@/assets/images/turntable/tohome.png"
          alt
          @click="$router.push('/home')"
        />
      </div>
      <!-- 未中奖弹窗 -->
      <div class="unsucce" v-if="noPrize">
        <img @click="noPrize=false" class="turnof" src="@/assets/images/turntable/turnoff.png" alt />
        <img class="toast_img" src="@/assets/images/turntable/redparket.png" alt />
        <p class="succe_tittle">哎呀！</p>
        <p class="succe_coin">大奖与我擦肩而过~</p>
        <p class="succe_bottom">所获积分可在“积分明细”里查看</p>
        <img
          class="succe_btn"
          src="@/assets/images/turntable/tohome.png"
          alt
          @click="$router.push('/home')"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant';
import { imgBaseUrl, baseUrl } from '@/config/env.js';
import weixin from '@/components/wx/wx.js';
export default {
  data() {
    return {
      todayPlayTimes: '',
      imgBaseUrl,
      baseUrl,
      winPrize: false,
      noPrize: false,
      rotateDeg: 0,
      isAuth: null,
      timesNum: 0,
      key: true,
      coin: ''
    };
  },
  mounted() {
    this.currentUserInfo();
    this.times();
    this.initWxChat();
  },
  methods: {
    initWxChat() {
      const url = window.location.href.split('#')[0];
      const param = {
        title: '好礼转不停 积分任你拿',
        desc: '好礼转不停 积分任你拿',
        link:
          baseUrl + 'entrance/goto?redir=' + window.location.href.split('#')[1],
        imgUrl: 'http://img.580travel.com/image/youchu/shareIcon.jpg',
        localUrl: url
      };
      weixin.wxChat(this, param);
    },
    begin() {
      if (this.isAuth === '0') {
        Dialog.confirm({
          title: '提示',
          message: '您还未实名认证',
          cancelButtonText: '再看看',
          confirmButtonText: '去认证'
        })
          .then(() => {
            this.$router.replace('/real_name');
          })
          .catch(() => {});
      } else {
        if (this.key) {
          Dialog.alert({
            // title: '提示',
            message:
              '每天最高可抽3次 !\n今日还剩' +
              this.todayLeftTimes +
              //  (this.timesNum >= 3
              //     ? 3 - this.todayPlayTimes
              //     : this.timesNum === 2 && this.todayPlayTimes < 3
              //     ? this.timesNum - this.todayPlayTimes
              //     : this.timesNum === 1 && this.todayPlayTimes < 2
              //     ? this.timesNum - this.todayPlayTimes
              //     : 0
              '次'
          }).then(() => {
            this.key = false;
            this.$http
              .post('/activityLottery/lottery', {
                source: 'spring2020'
              })
              .then(res => {
                console.log(res);
                this.$http.post('/coinUseRecord/times', {}).then(res => {
                  this.timesNum = res.data.object.lefttotalTimes;
                  this.todayLeftTimes = res.data.object.todayLeftTimes;
                });
                if (res.data.code === '0') {
                  this.coin = res.data.object.num;
                  switch (res.data.object.num) {
                    case 0:
                      this.turntableDeg(100);
                      setTimeout(() => {
                        this.key = true;
                        this.noPrize = true;
                      }, 3000);
                      break;
                    case 1:
                      this.turntableDeg(320);
                      setTimeout(() => {
                        this.key = true;
                        this.winPrize = true;
                      }, 3000);
                      break;
                    case 5:
                      this.turntableDeg(270);
                      setTimeout(() => {
                        this.key = true;
                        this.winPrize = true;
                      }, 3000);
                      break;
                    case 10:
                      this.turntableDeg(230);
                      setTimeout(() => {
                        this.key = true;
                        this.winPrize = true;
                      }, 3000);
                      break;
                    case 20:
                      this.turntableDeg(180);
                      setTimeout(() => {
                        this.key = true;
                        this.winPrize = true;
                      }, 3000);
                      break;
                    case 30:
                      this.turntableDeg(140);
                      setTimeout(() => {
                        this.key = true;
                        this.winPrize = true;
                      }, 3000);
                      break;
                    case 50:
                      this.turntableDeg(50);
                      setTimeout(() => {
                        this.key = true;
                        this.winPrize = true;
                      }, 3000);
                      break;
                    case 100:
                      this.turntableDeg(0);
                      setTimeout(() => {
                        this.key = true;
                        this.winPrize = true;
                      }, 3000);
                      break;
                  }
                } else if (res.data.code === '2') {
                  this.key = true;
                  Dialog.alert({
                    // title: '提示',
                    message:
                      '每人每天最高可享3次抽奖机会，您今日抽奖次数已用完！'
                  });
                } else {
                  this.key = true;
                  Dialog.alert({
                    title: '提示',
                    message: res.data.message
                  });
                }
              });
          });
        }
      }
      // Dialog.alert({
      //   message: '每人每天最高可享3次抽奖机会，您今日抽奖次数已用完！'
      // });
    },
    // 转盘旋转度数
    turntableDeg(num) {
      this.rotateDeg =
        this.rotateDeg + 3600 + (360 - (this.rotateDeg % 360)) + num;
    },
    // 判断用户是否实名
    currentUserInfo() {
      this.$http.post('/tuser/userInfo', {}).then(res => {
        console.log(res);
        if (res) {
          if (res.data.code === '0') {
            this.isAuth = res.data.object.isAuth;
            console.log(this.isAuth);
          }
        }
      });
    },
    // 获取抽奖次数
    times() {
      this.$http.post('/coinUseRecord/times', {}).then(res => {
        console.log(res);
        if (res) {
          if (res.data.code === '0') {
            this.timesNum = res.data.object.lefttotalTimes;
            this.todayLeftTimes = res.data.object.todayLeftTimes;
          }
        }
      });
    }
  },
  components: {}
};
</script>

<style lang="scss" scoped>
.btnimg {
  width: 130px;
  position: fixed;
  top: 450px;
  right: 30px;
  z-index: 998;
}
.btnimg1 {
  width: 130px;
  position: fixed;
  top: 450px;
  left: 30px;
  z-index: 998;
}
.backgroung_img {
  width: 100%;
  height: 5675px;
  background-size: 100% 100%;
  background-image: url(../../../assets/images/turntable/homebg.jpg);
  background-repeat: no-repeat;
  .act_time {
    font-size: 24px;
    color: #ffffff;
    margin-top: 442px;
    text-align: center;
  }
  .turntable_base {
    position: absolute;
    top: 497px;
    left: 0px;
    z-index: 100;
  }
  .point {
    position: absolute;
    top: 730px;
    left: 236px;
    width: 278px;
    height: 278px;
    z-index: 101;
  }
  .base {
    width: 650px;
    position: absolute;
    top: 1100px;
    left: 100px;
  }
  .times {
    font-size: 32px;
    letter-spacing: 7px;
    color: #ffe9c6;
    margin-top: 850px;
    text-align: center;
  }
  .rule_content {
    width: 650px;
    height: 4200px;
    border: 8px solid #fed79b;
    border-radius: 20px;
    margin-left: 50px;
    margin-top: 80px;
    box-shadow: inset 0px 0px 163px 0px rgba(174, 6, 11, 0.44),
      inset 0px 0px 21px 0px #ae060b;
    .rule_text {
      font-size: 26px;
      color: #ffdca5;
      padding-left: 36px;
      padding-right: 36px;
      margin-top: 72px;
      line-height: 38px;
    }
  }
  .rule_img {
    width: 290px;
    height: 60px;
    position: absolute;
    top: 1430px;
    left: 230px;
  }
  .succe {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
    .turnof {
      position: absolute;
      width: 80px;
      top: 150px;
      right: 100px;
    }
    .toast_img {
      width: 550px;
      margin-top: 220px;
      margin-left: 75px;
    }
    .succe_tittle {
      font-size: 40px;
      color: #dc2d0f;
      position: absolute;
      top: 288px;
      left: 315px;
      font-weight: bold;
    }
    .succe_coin {
      font-size: 60px;
      color: #dc2d0f;
      position: absolute;
      top: 392px;
      left: 268px;
    }
    .succe_bottom {
      font-size: 28px;
      color: #fff3ac;
      position: absolute;
      top: 710px;
      left: 185px;
    }
    .succe_btn {
      width: 350px;
      height: 90px;
      margin-top: 30px;
      margin-left: 200px;
    }
  }
  .unsucce {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
    .turnof {
      position: absolute;
      width: 80px;
      top: 150px;
      right: 100px;
    }
    .toast_img {
      width: 550px;
      margin-top: 220px;
      margin-left: 75px;
    }
    .succe_tittle {
      font-size: 40px;
      color: #dc2d0f;
      position: absolute;
      top: 325px;
      left: 325px;
      font-weight: bold;
    }
    .succe_coin {
      font-size: 40px;
      color: #dc2d0f;
      position: absolute;
      top: 380px;
      left: 205px;
      font-weight: bold;
    }
    .succe_bottom {
      font-size: 28px;
      color: #fff3ac;
      position: absolute;
      top: 710px;
      left: 185px;
    }
    .succe_btn {
      width: 350px;
      height: 90px;
      margin-top: 30px;
      margin-left: 200px;
    }
  }
}
.backgroung_img::before {
  content: '';
  display: table;
}
.rule_title {
  background-color: #fed699;
  border-radius: 3px;
  color: red;
  width: 165px;
  height: 37px;
  text-align: center;
  border-radius: 5px;
  margin-bottom: 10px;
  margin-top: 8px;
}
</style>
